import 'dart:io';

import 'package:cached_network_image/cached_network_image.dart';
import 'package:fish_redux/fish_redux.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_custom_dialog/flutter_custom_dialog.dart';
import 'package:school_safe_teacher/resourse/app_colors.dart';
import 'package:school_safe_teacher/widget/my_widget.dart';


import 'action.dart';
import 'state.dart';

Widget buildView(
    SuggestState state, Dispatch dispatch, ViewService viewService) {
  return body(
      child: Container(
        color: AppColors.MainBackColor,
        child: Column(
          children: [
            Container(
              padding: EdgeInsets.only(left: 15, right: 15),
              child:
                  noRightIconBar(context: viewService.context, title: "建议反馈"),
              color: Colors.white,
            ),
            Expanded(child: _body(state, dispatch, viewService)),
          ],
        ),
      ),
      context: viewService.context);
}

Widget _body(SuggestState state, Dispatch dispatch, ViewService viewService) {
  return Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      SizedBox(
        height: 10,
      ),
      Container(
        padding: EdgeInsets.only(left: 23, right: 18, top: 8, bottom: 8),
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              "问题描述",
              style: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: 15,
                  color: AppColors.deepTextColor),
            ),
            Expanded(child: Text("")),
            GestureDetector(
              child: Container(
                padding: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: state.type1BgColor,
                ),
                child: Text(
                  "问题反馈",
                  style: TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.normal,
                      color: state.type1TextColor),
                ),
              ),
              onTap: () {
                state..suggestType = 1;
                dispatch(SuggestActionCreator.onAction());
              },
            ),
            SizedBox(
              width: 12,
            ),
            GestureDetector(
              child: Container(
                padding: EdgeInsets.all(8),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(25),
                  color: state.type2BgColor,
                ),
                child: Text(
                  "产品建议",
                  style: TextStyle(
                      fontSize: 13,
                      fontWeight: FontWeight.normal,
                      color: state.type2TextColor),
                ),
              ),
              onTap: () {
                state..suggestType = 2;
                dispatch(SuggestActionCreator.onAction());
              },
            ),
          ],
        ),
        color: Colors.white,
      ),
      SizedBox(
        height: 10,
      ),
      Container(
        color: Colors.white,
        padding: EdgeInsets.all(15),
        child: TextField(
            maxLength: 200,
            onChanged: (value) {
              state..content = value;
              dispatch(SuggestActionCreator.onAction());
            },
            textInputAction: TextInputAction.done,
            maxLines: 7,
            decoration: InputDecoration(
                contentPadding: EdgeInsets.zero,
                border: InputBorder.none,
                hintText: "请说明建议，我们将为您不断改进～",
                isDense: true,
                hintStyle: TextStyle(
                    fontWeight: FontWeight.normal,
                    fontSize: 14,
                    textBaseline: TextBaseline.alphabetic,
                    color: AppColors.hintTextColor)),
            keyboardType: TextInputType.multiline,
            maxLengthEnforcement: MaxLengthEnforcement.enforced),
      ),
      Container(
        width: MediaQuery.of(viewService.context).size.width,
        child: ListView.separated(
            scrollDirection: Axis.horizontal,
            shrinkWrap: true,
            padding: EdgeInsets.all(15),
            itemBuilder: (BuildContext context, int index) {
              if (state.images.isEmpty) {
                return GestureDetector(
                  child: Container(
                    width: 75,
                    height: 75,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      color: Colors.white,
                      border: new Border.all(
                          color: AppColors.bordColor, width: 0.5),
                    ),
                    child: Stack(
                      children: [
                        Center(
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            children: [
                              Icon(
                                Icons.add,
                                color: Color(0xFFA0A0A0),
                                size: 15,
                              ),
                              SizedBox(
                                height: 10,
                              ),
                              Text(
                                "添加图片",
                                style: TextStyle(
                                    fontSize: 13,
                                    fontWeight: FontWeight.normal,
                                    color: AppColors.smallTextColor),
                              )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                  onTap: () {
                    addPicDialog(state, dispatch, viewService);
                  },
                );
              } else if (state.images.length < 4) {
                if (index < state.images.length) {
                  return GestureDetector(
                    child: Container(
                      width: 75,
                      height: 75,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white,
                        border: new Border.all(
                            color: AppColors.bordColor, width: 0.5),
                      ),
                      child: CachedNetworkImage(
                        imageUrl: state.images[index],
                        fit: BoxFit.fill,
                        placeholder: (context, url) =>
                            CircularProgressIndicator(
                          backgroundColor: AppColors.mainYellowColor,
                        ),
                        imageBuilder: (context, imageProvider) => Container(
                          width: 75,
                          height: 75,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white,
                            border: new Border.all(
                                color: AppColors.bordColor, width: 0.5),
                            image: DecorationImage(
                                image: imageProvider,
                                fit: BoxFit.cover,
                                colorFilter: ColorFilter.mode(
                                    Colors.transparent, BlendMode.colorBurn)),
                          ),
                        ),
                      ),
                    ),
                    onTap: () {
                      state.images.removeAt(index);
                      dispatch(SuggestActionCreator.onAction());
                    },
                  );
                } else {
                  return GestureDetector(
                    child: Container(
                      width: 75,
                      height: 75,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white,
                        border: new Border.all(
                            color: AppColors.bordColor, width: 0.5),
                      ),
                      child: Stack(
                        children: [
                          Center(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                Icon(
                                  Icons.add,
                                  color: Color(0xFFA0A0A0),
                                  size: 15,
                                ),
                                SizedBox(
                                  height: 10,
                                ),
                                Text(
                                  "添加图片",
                                  style: TextStyle(
                                      fontSize: 13,
                                      fontWeight: FontWeight.normal,
                                      color: AppColors.smallTextColor),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                    onTap: () {
                      addPicDialog(state, dispatch, viewService);
                    },
                  );
                }
              } else {
                return GestureDetector(
                  child: Container(
                      width: 75,
                      height: 75,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white,
                        border: new Border.all(
                            color: AppColors.bordColor, width: 0.5),
                      ),
                      child: CachedNetworkImage(
                        imageUrl: state.images[index],
                        fit: BoxFit.fill,
                        placeholder: (context, url) =>
                            CircularProgressIndicator(
                          backgroundColor: AppColors.mainYellowColor,
                        ),
                        imageBuilder: (context, imageProvider) => Container(
                          width: 75,
                          height: 75,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white,
                            border: new Border.all(
                                color: AppColors.bordColor, width: 0.5),
                            image: DecorationImage(
                                image: imageProvider,
                                fit: BoxFit.cover,
                                colorFilter: ColorFilter.mode(
                                    Colors.transparent, BlendMode.colorBurn)),
                          ),
                        ),
                      )),
                  onTap: () {
                    state.images.removeAt(index);
                    dispatch(SuggestActionCreator.onAction());
                  },
                );
              }
            },
            separatorBuilder: (BuildContext context, int index) {
              return SizedBox(
                width: 15,
              );
            },
            itemCount: state.images.isEmpty
                ? 1
                : (state.images.length < 4
                    ? state.images.length + 1
                    : state.images.length)),
        height: 100,
        color: Colors.white,
      ),
      Container(
        padding: EdgeInsets.all(20),
        child: Row(
          children: [
            Expanded(child: Text("")),
            Text(
              state.images.length.toString() + "/4",
              style: TextStyle(
                  fontWeight: FontWeight.normal,
                  fontSize: 12,
                  color: AppColors.smallTextColor),
            )
          ],
        ),
        color: Colors.white,
      ),
      GestureDetector(
        child: Container(
          height: 45,
          margin: EdgeInsets.fromLTRB(25, 33, 25, 0),
          alignment: Alignment.center,
          width: MediaQuery.of(viewService.context).size.width - 50,
          child: Text(
            "提交",
            style: TextStyle(
                color: state.loginTextColor,
                fontSize: 15,
                fontWeight: FontWeight.normal),
          ),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(25),
            color: AppColors.editBackgroundColor,
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [
                state.loginBtnStartColor,
                state.loginBtnEndColor,
              ],
            ),
          ),
        ),
        onTap: () {
          dispatch(SuggestActionCreator.onSubmit());
        },
      )
    ],
  );
}

YYDialog addPicDialog(
    SuggestState state, Dispatch dispatch, ViewService viewService) {
  YYDialog yyDialog = YYDialog().build(viewService.context);
  return yyDialog.build(viewService.context)
    ..gravity = Gravity.bottom
    ..gravityAnimationEnable = true
    ..backgroundColor = Colors.white
    ..widget(GestureDetector(
      behavior: HitTestBehavior.opaque,
      child: Container(
        width: MediaQuery.of(viewService.context).size.width,
        padding: EdgeInsets.all(12),
        child: Center(
          child: Text("拍照"),
        ),
      ),
      onTap: () {
        dispatch(SuggestActionCreator.onCameraPic());
        yyDialog.dismiss();
      },
    ))
    ..widget(GestureDetector(
      behavior: HitTestBehavior.opaque,
      child: Container(
        width: MediaQuery.of(viewService.context).size.width,
        padding: EdgeInsets.all(12),
        child: Center(
          child: Text("从相册中选取"),
        ),
      ),
      onTap: () {
        dispatch(SuggestActionCreator.onChoosePic());
        yyDialog.dismiss();
      },
    ))
    ..widget(Platform.isIOS
        ? SizedBox(
            height: MediaQuery.of(viewService.context).padding.bottom,
          )
        : Container())
    ..show();
}
